<template>
    <div>
    <header class="fixed-header">
      <div class="menu-container">
        <el-menu 
          :default-active="activeIndex" 
          class="el-menu-demo custom-menu" 
          mode="horizontal" 
          @select="handleSelect"
          text-color="teal"
          :background-color="'rgba(192,192,192,0.8)'"
          active-text-color="#409EFF">
          <el-menu-item index="/" style="font-size: 24px;">首页</el-menu-item>
          <el-submenu index="/exhibition-hall">
            <template #title> 
              <span style="font-size: 24px;" class="custom-submenu-title">展厅信息</span>
            </template>
            <el-menu-item index="/exhibitionhall/floor-1">一楼</el-menu-item>
            <el-menu-item index="/exhibitionhall/floor-2">二楼</el-menu-item>
            <el-menu-item index="/exhibitionhall/floor-3">三楼</el-menu-item>
          </el-submenu>
          <el-menu-item index="/collection" style="font-size: 24px;" class="menu-item-spacing">藏品信息</el-menu-item>
          <el-submenu index="/exhibition">
            <template #title>
               <span style="font-size: 24px;" class="custom-submenu-title">展览信息</span>
            </template>
            <el-menu-item index="/exhibition/permanent">常设展览</el-menu-item>
            <el-menu-item index="/exhibition/temporary">临时展览</el-menu-item>
            <el-menu-item index="/exhibition/review">展览回顾</el-menu-item>
          </el-submenu>
          <el-menu-item index="/culturalproducts" style="font-size: 24px;" class="menu-item-spacing">文创产品</el-menu-item>
          <el-menu-item index="/visitorservices" style="font-size: 24px;" class="menu-item-spacing">游客服务</el-menu-item>
         <div class="right-menu">
            <el-menu-item index="/profile" style="font-size: 24px;" class="right-menu-item">个人中心</el-menu-item>
            <el-menu-item index="/login" style="font-size: 24px;" class="right-menu-item">登录</el-menu-item>
         </div>
        </el-menu>
      </div>
    </header>
      <div class="background-container">
        <img :src="backgroundImages[activeIndex]" alt="background" class="background-image">
      </div>
      <div class="line"></div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeIndex: '/',
        backgroundImages: {
          '/':require('@/assets/picture1.jpg'),
          '/exhibitionhall/floor-1': require('@/assets/picture4.jpg'),
          '/exhibitionhall/floor-2': require('@/assets/picture4.jpg'),
          '/exhibitionhall/floor-3': require('@/assets/picture4.jpg'),
          '/collection': require('@/assets/picture3.jpg'),
          '/exhibition/permanent': require('@/assets/picture5.jpg'),
          '/exhibition/temporary': require('@/assets/picture5.jpg'),
          '/exhibition/review': require('@/assets/picture5.jpg'),
          '/culturalproducts': require('@/assets/picture7.jpg'),
          '/visitorservices': require('@/assets/picture6.jpg')
        }
      };
    },
    watch: {
      // 监听路由变化，更新激活的菜单项
      '$route'(to) {
        this.activeIndex = to.path
      }
    },
    created() {
      // 初始化时设置当前路由为激活菜单项
      this.activeIndex = this.$route.path
    },
    methods: {
      handleSelect(key) {
        // 检查当前路径是否已经是目标路径
        if (this.$route.path !== key) {
          this.$router.push(key);
        }
      }
    }
  }
  </script> 
  
  <style scoped>
  /* 样式保持不变 */
  .fixed-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .background-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* 确保背景图片在菜单项之下 */
  }
   
  .background-image {
    width: 100%;
    height: 400px;
    object-fit: cover; /* 确保图片覆盖整个容器 */
  }
  
  .menu-container {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 150px;
  }
  
  .custom-menu.el-menu--horizontal{
    height: 150px;
    line-height: 80px;
    display: flex;
    align-items: center;
  }
  
  .custom-menu .el-menu-item {
    margin-right: 50px;
  }
  
  .custom-menu .el-submenu {
    margin-right: 50px;
  }
  
  .custom-menu .menu-item-spacing {
    margin-right: 50px;
  }
  
  .line {
    border-bottom: 1px solid #CFCFCF;
    margin-top: 410px;
    width: 100%;
  }
  </style>